<script setup lang="ts">
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import { themesStore } from '@/stores/modules/theme'
import { storeToRefs } from 'pinia'
import {
  NConfigProvider,
  NLoadingBarProvider,
  NMessageProvider,
  NDialogProvider,
  darkTheme,
  zhCN
} from 'naive-ui'
hljs.registerLanguage('javascript', javascript)
const isDark = ref(false)
const themeInfo = computed(() => {
  return isDark.value ? darkTheme : undefined
})

const theme = themesStore()
const { getThemeOverrides: themeOverrides } = storeToRefs(theme)
</script>

<template>
  <NConfigProvider
    abstract
    :theme="themeInfo"
    :themeOverrides="themeOverrides"
    :locale="zhCN"
    :hljs="hljs"
  >
    <NLoadingBarProvider>
      <NMessageProvider>
        <NDialogProvider>
          <router-view />
        </NDialogProvider>
      </NMessageProvider>
    </NLoadingBarProvider>
  </NConfigProvider>
</template>

<style scoped></style>
